<template>
    <div class="login-container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="formY" :model="formData" :rules="rules" ref="loginFormRef">
                    <div class="title" style="margin-top: 5vh;">
                        <h1>Hello</h1>
                        <h2>欢迎来到创智绩效管理系统</h2>
                    </div>
                    <el-form-item label="账号" prop="adminName">
                        <el-input type="text" placeholder="请输入账号" style="max-width:350px;min-width: 350px;"
                            prefix-icon="User" v-model="formData.adminName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="adminPassword">
                        <el-input type="password" placeholder="请输入密码" style="max-width:350px;min-width: 350px;"
                            prefix-icon="Lock" v-model="formData.adminPassword" show-password> </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :lading="loading" class="btn" @click="login">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

    </div>
</template>

<script setup lang='ts'>

import { ElNotification } from "element-plus"

import { ref } from "vue"
//引入仓库
import { store } from "@/stores/modules/user/user.ts"
//引入路由
import { useRoute, useRouter } from 'vue-router'
//引入时间函数
import { loginTime } from "@/utils/time"
//获取路由对象
let $router = useRouter()
let $route = useRoute()
let loginStore = store()
//获取el-form组件对象
let loginFormRef = ref()
let loading = ref<boolean>(false)
//表单数据
let formData = ref({
    adminName: '',
    adminPassword: '',
})
//自定义表单校验配置对象
//账号
const validatorUsername = (rule: any, value: any, callback: any) => {


    if (value.length == 0) {
        callback(new Error('用户名不能为空'))
    }
    if (value.length < 3 || value.length > 10) {
        callback(new Error('用户名长度在3-10之间'))
    } else {
        callback()
    }
}
//密码
const validatorPassword = (rule: any, value: any, callback: any) => {

    if (value.length == 0) {

        callback(new Error('密码不能为空'))
    }
    if (value.length < 3 || value.length > 10) {
        callback(new Error('密码长度在3-10之间'))
    } else {
        callback()
    }
}
//自定义表单校验规则
const rules = {
    adminName: [
        { trigger: 'blur', validator: validatorUsername }
    ],
    adminPassword: [
        { trigger: 'blur', validator: validatorPassword }
    ]
}
//登录
const login = async () => {
    //validate对整个表单的内容进行验证。接收一个回调函数,或返回Promise。如果校验不通过，不会发请求
    await loginFormRef.value.validate();
    loading.value = true
    try {
        let res = await loginStore.userLogin(formData.value)

        if (res == "ok") {
            //登录成功后停止加载
            loading.value = false
            let redirect: any = $route.query.redirect
            $router.push({ path: redirect || '/' })
            //获取用户信息
            await loginStore.userInfo()
            //提示登录成功
            ElNotification({
                title: `HI,${loginTime()}`,
                message: "登录成功",
                type: 'success',
            })
        }
    } catch (error: any) {
        //登陆失败后停止加载
        loading.value = false
        //登陆失败的提示信息
        ElNotification({
            title: '登录失败',
            message: error.message,
            type: 'error',
        })
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    width: 100%;
    height: 100vh;
    background: url('../../../public/1.jpg') no-repeat;
    background-size: cover;
}

.title {
    color: rgb(0, 0, 0, .7);

}

.btn {
    width: calc(100% - 40px);
    margin-left: 40px;
    max-width: 350px;
    min-width: 350px;
}

.formY {
    width: 80%;
    height: 50vh;
    background-color: rgb(255, 255, 255, .6);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 568px;
    max-height: 438px;
    margin-top: 25%;
}
</style>